﻿@model ORM.ViewModels.Questions.AnswerListViewModel
<div id="answerList">
    @foreach (var item in Model.Answers)
    {
        if (item.Highlight)
        {
        <fieldset id="answerFieldSet @item.Id" style="background-color: lightcyan">
            <table width="100%" style="vertical-align: top">
                <tr>
                    <td style="width: 15%; vertical-align: top">
                        <br />
                        <center>
                            <fieldset>
                                @if (item.IsVotedByCurrentUser)
                                {
                                    <input type="image" src="/Content/Images/Action-arrow-blue-down.ico" id="answerPointImage @item.Id" onclick="PlusPointForAnAnswer('@item.Id')"  style="width: 30px; height: 30px;" title="Bạn đã vote cho câu trả lời này &#13;Click tiếp để huỷ"/><br />                 
                                }
                                else
                                {
                                    <input type="image" src="/Content/Images/Action-arrow-blue-up.ico" id="answerPointImage @item.Id" onclick="PlusPointForAnAnswer('@item.Id')"  style="width: 30px; height: 30px;" title="Click để cộng điểm cho câu trả lời &#13;Click tiếp để huỷ"/><br />                 
                                }
                                <b id="answerPoint @item.Id">@item.UpVotes</b><br />
                                Điểm
                                <br />
                            </fieldset>
                            <div style="font-size: 13px; padding-top: 5px">
                                <div style="font-weight: bold">
                                    <a href="/Account/Details/@item.PostedBy.Id" class="titleLink">@item.PostedBy.Username</a></div>
                                @item.PostedDate.ToString("dd-MM-yyyy")<br />
                                @item.PostedDate.ToString("HH:mm")<br />
                            </div>
                        </center>
                    </td>
                    <td style="width: 85%; border-left: 2px solid gainsboro; padding-left: 22px; vertical-align: top">
                        @if (item.IsAccepted)
                        {
                            <div style="text-align: right">
                                <img src="/Content/Images/Actions-ok.ico" width="20px" height="20px" title="" /><span
                                    style="color: green; font-style: italic; font-size: 13px">Câu trả lời này đã giúp
                                    người hỏi giải quyết được vấn đề</span>
                            </div>
                                
                        }
                        @Html.Raw(item.ContentHtml)
                        <br />
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td style="text-align: right; font-size: 13px">
                        @if (Model.CanAccept == true)
                        {
                            <span href="" class="titleLink" onclick="AcceptAnAnswer('@item.QuestionId','@item.Id')" style="cursor: pointer; color: #034af3">
                                Chấp nhận câu trả lời</span>
                            
                        }
                        @if ((Model.CurrentUserId == item.PostedById && !item.IsAccepted) || User.IsInRole("Admin"))
                        {
                            <span href="" class="titleLink" onclick="DeleteAnAnswer('@item.QuestionId','@item.Id')" style="cursor: pointer; color: #034af3; padding-left: 10px">
                                Xoá câu trả lời</span>
                        }
                    </td>
                </tr>
            </table>
        </fieldset>
        <br />
        }
        else
        {
        <fieldset id="answerFieldSet @item.Id">
            <table width="100%" style="vertical-align: top">
                <tr>
                    <td style="width: 15%; vertical-align: top">
                        <br />
                        <center>
                            <fieldset>
                                @if (item.IsVotedByCurrentUser)
                                {
                                    <input type="image" src="/Content/Images/Action-arrow-blue-down.ico" id="answerPointImage @item.Id" onclick="PlusPointForAnAnswer('@item.Id')"  style="width: 30px; height: 30px;" title="Bạn đã vote cho câu trả lời này &#13;Click tiếp để huỷ"/><br />                 
                                }
                                else
                                {
                                    <input type="image" src="/Content/Images/Action-arrow-blue-up.ico" id="answerPointImage @item.Id" onclick="PlusPointForAnAnswer('@item.Id')"  style="width: 30px; height: 30px;" title="Click để cộng điểm cho câu trả lời &#13;Click tiếp để huỷ"/><br />                 
                                }
                                <b id="answerPoint @item.Id">@item.UpVotes</b><br />
                                Điểm
                                <br />
                            </fieldset>
                            <div style="font-size: 13px; padding-top: 5px">
                                <div style="font-weight: bold">
                                    <a href="/Account/Details/@item.PostedBy.Id" class="titleLink">@item.PostedBy.Username</a></div>
                                @item.PostedDate.ToString("dd-MM-yyyy")<br />
                                @item.PostedDate.ToString("HH:mm")<br />
                            </div>
                        </center>
                    </td>
                    <td style="width: 85%; border-left: 2px solid gainsboro; padding-left: 22px; vertical-align: top">
                        @if (item.IsAccepted)
                        {
                            <div style="text-align: right; padding-top: 0px">
                                <img src="/Content/Images/Actions-ok.ico" width="20px" height="20px" title="" /><span
                                    style="color: green; font-style: italic; font-size: 13px">Câu trả lời này đã giúp
                                    người hỏi giải quyết được vấn đề</span><br /><br/>
                            </div>
                                
                        }
                        @Html.Raw(item.ContentHtml)
                        <br />
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td style="text-align: right; font-size: 13px">
                        @if (Model.CanAccept == true)
                        {
                            <span href="" class="titleLink" onclick="AcceptAnAnswer('@item.QuestionId','@item.Id')" style="cursor: pointer; color: #034af3">
                                Chấp nhận câu trả lời</span>
                            
                        }
                        @if ((Model.CurrentUserId == item.PostedById && !item.IsAccepted) || User.IsInRole("Admin"))
                        {
                            <span href="" class="titleLink" onclick="DeleteAnAnswer('@item.QuestionId','@item.Id')" style="cursor: pointer; color: #034af3; padding-left: 10px">
                                Xoá câu trả lời</span>
                        }
                    </td>
                </tr>
            </table>
        </fieldset>
        <br />
        }

    }
    <table width="100%">
        <tr>
            <td style="text-align: left; width: 20%">
                @if (Model.PageNo != 1)
                {
                    var targetDiv = "answerList";
                    var previousPage = @Model.PageNo - 1;
                    <input type="image" src="/Content/Images/hide-left.ico" id="btnGoFirst" onclick="GoToAnswerPage('@Model.QuestionId', '@Model.Condition', 1, '@targetDiv')" style="width: 20px; height: 20px;" title = "Xem Trang Đầu Tiên" />
                    <input type="image" src="/Content/Images/navigate-left.ico" id="btnGoPrevious" onclick="GoToAnswerPage('@Model.QuestionId', '@Model.Condition', '@previousPage', '@targetDiv')" style="width: 20px; height: 20px;" title = "Xem Trang Trước" />
                }
            </td>
            <td style="text-align: center; width: 60%">
                @if (Model.TotalPage == 0)
                {
                    <span>Chưa Có Câu Trả Lời</span>
                }
                else
                {
                    if(Model.TotalPage > 1)
                    {
                        <span>Trang @Model.PageNo Trên Tổng Số @Model.TotalPage Trang</span>
                    }
                }
            </td>
            <td style="text-align: right; width: 20%">
                @if (Model.PageNo != Model.TotalPage && Model.TotalPage != 0)
                {
                    var targetDiv = "answerList";
                    var nextPage = @Model.PageNo + 1;
                    <input type="image" src="/Content/Images/navigate-right.ico" id="btnGoNext" onclick="GoToAnswerPage('@Model.QuestionId', '@Model.Condition', '@nextPage', '@targetDiv')" style="width: 20px; height: 20px" title="Xem Trang Sau" />
                    <input type="image" src="/Content/Images/hide-right.ico" id="btnGoNext" onclick="GoToAnswerPage('@Model.QuestionId', '@Model.Condition', '@Model.TotalPage', '@targetDiv')" style="width: 20px; height: 20px" title = "Xem Trang Cuối"/>
                }
            </td>
        </tr>
    </table>
</div>
